{extend name="common/menu_child" /}

{block name="nav"}
<span class="layui-breadcrumb">
	<a>基础信息</a>
	<a><cite>用户增加趋势</cite></a>
</span>
{/block}

{block name="body"}
<div class="layui-row">
	<form name="condition" class="layui-form layui-col-md12 x-so" action="" method="get">
		<input class="layui-input" placeholder="时间范围（默认最近七天）" name="date_range" autocomplete="off" readonly="readonly" style="width:200px;" />
		<button type="button" class="layui-btn submit" type="submit"><i class="layui-icon">&#xe615;</i></button>
	</form>
</div>
<div id="main" style="padding:20px;min-height:400px;min-width:600px;border:1px solid #e6e6e6;margin-top:4px;"></div>
{/block}

{block name="javascript"}
<script type="text/javascript" src="/backend_/plugin/echarts/echarts-4.2.0-rc.2.min.js"></script>
<script type="text/javascript">
	
	/**
	 * 初始化
	 */
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
		tooltip: {
			trigger: 'axis',
			position: function(pt) {
				return [pt[0], '10%'];
			},
			formatter: function(data){
				content = data[0].axisValueLabel+'<br />';
				content += data[0].seriesName+'：'+data[0].value+' 人';
				return content;
			},
		},
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value',
		},
		series: [{
			name: '当天新增用户',
			type: 'line',
			data: [820, 932, 901, 934, 1290, 1330, 1320],
		}]
	};
	layui.use(['layer', 'laydate'], function(args){
		
		/* 绑定日期选择 */
		layui.laydate.render({
			elem: 'input[name=date_range]',
			range: '~'
		});
		
		/* 获取日期 */
		function get_date(offset){
			
			let date = new Date();
			date.setDate(date.getDate() + offset);
			
			/* 拼装日期 */
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			if(10 > month){
				month = '0' + month.toString();
			};
			let day = date.getDate();
			if(10 > day){
				day = '0' + day.toString();
			};
			return year + "-" + month + "-" + day;
		};
		
		/* 提交获取参数 */
		function submit_gain(){
			
			var data = disposeFormSerialize('form[name=condition]');
			
			if(0 === data.date_range.length){
				data.date_range = get_date(-6) + ' ~ ' + get_date(0);
			};
			
			data.action = 'get_data';
			action_post_json('', data, function(response){
				switch(response.errno){
					case 0 :
						option.xAxis.data = response.data.title;
						option.series[0].data = response.data.value;
						myChart.setOption(option);
						break;
					default:
						layer.msg(response.message);
						break;
				};
			});
		};
		$('button.submit').on('click', function(){
			submit_gain();
		});
		submit_gain();
	});
	
</script>
{/block}